<template>
    <el-card>
        <span slot="header">修改密码</span>

        <div style="width:400px">

            <el-form :model="pwdData" label-width="100px" :rules="rules" ref="accountForm">
                <el-form-item label="原密码" prop="oldpwd">
                    <el-input show-password v-model="pwdData.oldpwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpwd">
                    <el-input show-password v-model="pwdData.newpwd"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="yespwd">
                    <el-input show-password v-model="pwdData.yespwd"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="yesSure">确认</el-button>
                    <el-button type="danger" @click="removeHandle">取消</el-button>
                </el-form-item>

            </el-form>
        </div>
    </el-card>
</template>

<script>
import {usersCheckoldpwd ,usersEditpwd} from "@/api/user"
export default {
    data() {
        return {
            pwdData: {
                oldpwd: "",
                newpwd: "",
                yespwd: ""
            },
            rules: {
                oldpwd: { validator: this.validateOldpwd, trigger: 'blur' },
                newpwd: { validator: this.validatenewpwd, trigger: 'blur' },
                yespwd: { validator: this.validateyespwd, trigger: 'blur' },
              

            }
            
           
        }
        
    },
    methods: {
        //验证原密码
        
        async  validateOldpwd ( rule, value, callback) {
            //rule 验证规则 几乎不用
            //value 当前的值
            //callback 回掉函数 没有通过 callback(new Error ("提示信息")) 通过了就callback()

            if (value.length === 0) {
                return callback(new Error("密码不能为空"))
            } else if (!/^\w{6,12}$/.test(value)) {

                return callback(new Error("数字/字母/下划线(6-12位)"))
            } else {
                //成功了就发送ajax
              let res = await  usersCheckoldpwd({oldPwd:this.pwdData.oldpwd});
             
              if(res.data.code===200){
                callback();//通过
              }else{
                return callback(new Error(res.data.msg))
              }
               
            }
        },
        //新密码
        validatenewpwd(rule, value, callback) {

            if (value.length === 0) {
                return callback(new Error("新密码不能为空"))
            } else if (value === this.pwdData.oldpwd) {
                return callback(new Error("新密码不能与原密码重复"));
            } else if (!/^\w{6,12}$/.test(value)) {

                return callback(new Error("数字/字母/下划线(6-12位)"))
            } else {
                
                callback()//通过
            }

        },
        //确认新密码
        validateyespwd(rule, value, callback) {
            if (value.length === 0) {
                return callback(new Error("确认密码不能为空"))
            } else if (value != this.pwdData.newpwd) {
                return callback(new Error("确认密码与原密码不一致"));
            } else {
                callback()//通过
            }
        },
        //点击取消按钮消除提示校验文字
        removeHandle(){
            this.$refs.accountForm.resetFields()
           
        },
        //确认提交按钮
        yesSure(){
            
            this.$refs.accountForm.validate(async (valid)=>{
                if(valid){
                  let res = await   usersEditpwd({newPwd:this.pwdData.newpwd});
                  let {code ,msg } =res.data
                 if(code===0){
                   this.$message.success(msg)
                   localStorage.clear()
                    this.$router.push("/login")
                 }else{
                   this.$message.error(msg)
                 }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.md-pwd-wrap {
  padding: 20px 15px;
  .md-pwd-cont {
    .el-input {
      width: 200px;
    }
  }
}
.el-card {
  background-color: #fef8f8;
}
.el-button--primary {
  background-color: #e3bc25;
  border: 0;
  font-size: 16px;
}
.el-card__header {
  span {
    color: #e3bc25;
    font-size: 23px;
    font-weight: 700;
  }
}
</style>
